<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../00_static/js/vue.js" type="text/javascript"></script>
    <title>姓名案例_watch实现</title>
</head>

<body>
    <!-- 
        监视属性watch:
            1.当被监视的属性变化时，回调函数自动调用，进行相关操作
            2.属性必须存在，才能进行监视
            3.监视的两种写法：
                1）new Vue时传入watch配置
                2）通过vm.$watch监视
        computed和watch之间的区别：
            1.只要时computed能完成的功能，watch都可以完成
            2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
        备注：
            1.所有被Vue所调用（管理）的函数，都不要写箭头函数 -- 例如：watch中的函数、computed中的函数
            2.所有不是被Vue所调用（管理）的函数，都要写成箭头函数 -- 例如：定时器的回调、ajax的回调等等    
     -->

    <div id="app">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        <span>全名：{{fullName}}</span>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '三',
                fullName: '',
            },
            // watch: {
            //     // 检测姓
            //     firstName(newValue, oldValye) {
            //         this.fullName = newValue + '-' + this.lastName
            //     },
            //     // 检测名
            //     lastName(newValue, oldValye) {
            //         this.fullName = this.firstName + '-' + newValue
            //     }
            // }
        })

        vm.$watch('firstName', {
            immediate: true,
            handler(newValue, oldValue) {
                setTimeout(() => {
                    this.fullName = newValue + '-' + this.lastName
                }, 1000)
            }
        })
        vm.$watch('lastName', {
            immediate: true,
            handler(newValue, oldValue) {
                setTimeout(() => {
                    this.fullName = this.firstName + '-' + newValue
                }, 1000)
            }
        })
    </script>
</body>

</html>